<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module">
      // 模块化导入不能使用 umd 格式
      // import * as Raect from 'https://cdn.jsdelivr.net/npm/react@18.3.1/umd/react.production.min.js';
      // import * as ReactDom from 'https://cdn.jsdelivr.net/npm/react-dom@18.3.1/umd/react-dom.production.min.js';
      // import * as ReactDom from 'https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js';
      // console.error(`%c react.html 36 `, 'background:aqua;', Raect, ReactDom); // => Symbol(Symbol.toStringTag): "Module"

      import * as React from 'https://cdn.jsdelivr.net/npm/react@18.3.1/+esm';
      import * as ReactDOM from 'https://cdn.jsdelivr.net/npm/react-dom@18.3.1/+esm';
      // import * as ReactDOM from 'https://unpkg.com/react-dom@18.3.1/cjs/react-dom.production.min.js' //  require is not defined

      console.log(`%c script-module.html 19 React `, 'background:aqua;', React);
      console.log(`%c script-module.html 20 ReactDOM `, 'background:aqua;', ReactDOM);

      function App() {
        // 使用JSX需要Babel转换
        // return (<h1> JSX h1 Hello, React!</h1>)

        // 没有 Babel 使用 React.createElement
        return React.createElement('h1', null, 'Hello, React!');
      }

      // 以下两种都可以
      // ReactDOM.render(React.createElement(App), document.getElementById('root'));
      ReactDOM.render(App(), document.getElementById('root'));
    </script>
  </body>
</html>
